<template>
	<view class="content">
		<!-- 顶部的搜索 -->
		<view class="searchBox">
			<view>
				<img src="../../static/images/position.png" alt="">
				<view>开封</view>
			</view>
			<view class="searchInput">
				<input class="uni-input" confirm-type="search" placeholder="点击搜索你感兴趣的文化内容"
					placeholder-style="color:#B2B2B2" />
				<img src="../../static/images/search.png" alt="">
			</view>
		</view>
		<!-- 导航 -->
		<easyBar @scrollTabClick="scrollTabClick" :currentIndex="currentIndex"></easyBar>
		<!-- 轮播 -->
		<view class="swiperBox">
			<swiper :swiperItems="swiperItems" :swiperStyleClass="swiperStyleClass"></swiper>
		</view>
		<!-- 模块导航 -->
		<view class="navList">
			<view class="navItem" v-for="(item,index) in navList" :key="index" @click="handelNavClick(item.url)">
				<img :src=item.img alt="">
				<view>{{item.tit}}</view>
			</view>
		</view>
		<!-- 咨询跑马灯 -->
		<view class="lamp">
			<uni-notice-bar scrollable="true" showIcon="true" single="true" :text="Notice" more-text="资讯"
				:show-get-more="true" :show-icon="true" :single="true"></uni-notice-bar>
		</view>
		<!--猜你喜欢 -->
		<view class="recommend">
			<!-- 头部 title-->
			<view class="recommendTit">
				<view>
					<img src="../../static/images/like.png" alt="">
					<text>猜你喜欢</text>
				</view>
				<view>
					<text>选择兴趣</text>
					<text></text>
					<text>更多</text>
				</view>
			</view>
			<!-- list列表 -->
			<view class="likeList">
				<view class="likeListItem" v-for="(item,index) in likeList" :key="index">
					<view class="playBtn">
						<img src="../../static/images/play.png" alt="">
					</view>
					<view>
						<img :src=item.img alt="">
						<view class="likeTit">{{item.tit}}</view>
						<view>
							<view>
								<img src="../../static/images/wlj.png" alt="">
								<text>{{item.addres}}</text>
							</view>
							<view>
								<img src="../../static/images/veryLike.png" alt="">
								<text>{{item.like}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="nextPage">
					<view>
						<img src="../../static/images/nextPage.png" alt="">
						<text>换一批</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 活动 -->
		<view class="activity">
			<!-- 导航 -->
			<view class="activityNav">
				<img src="../../static/images/activity.png" alt="">
				<view class="activitynavItem">
					<view v-for="(item,index) in activityList" :key="index" :class="active==index?'isActive':''"
						@click="handelClick(index)">
						{{item.tit}}
					</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="activityList">
				<view class="activityItem" v-for="(item,index) in actiList" :key="index">
					<view>
						<img :src=item.img alt="">
					</view>
					<view>
						<view class="tit">
							{{item.tit}}
						</view>
						<view class="actyTime">活动时间：{{item.time}}</view>
						<view class="actyAddes">活动地点：{{item.addres}}</view>
						<button class="btn">立即预约</button>
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<view class="lodingMore">
				<view>
					<img src="../../static/images/more.png" alt="">
					<text>更 多</text>
				</view>
			</view>
		</view>
		<!-- 直播 -->
		<view class="broadcast">
			<view class="broadcastTit">
				<view>
					<img src="../../static/images/broadcast.png" alt="">
					<view class="broadcastNavList" v-for="(item,index) in broadcastNav" :key="index">
						<text :class="isActi==index?'isActive':''" @click="broadcastHnadel(index)">{{item.tit}}</text>
					</view>
				</view>
				<view>
					<text style="font-size: 24upx;">更多</text>
					<img src="../../static/images/seeMore.png" alt="">
				</view>
			</view>
			<view class="broadcastList">
				<view class="broadcastItem" v-for="(item,index) in broadcastList" :key="index">
					<img :src=item.img alt="">
					<view class="playing">
						<img src="../../static/images/playing.png" alt="">
						<text>直播中</text>
					</view>
					<view class="playBtn">
						<img src="../../static/images/play.png" alt="">
					</view>
					<view class="broadcasTexplain">
						<view>{{item.tit}}</view>
						<view>直播时间：{{item.time}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 热门机构 -->
		<view class="popularInstitutions">
			<view class="popularTit">
				<view>
					<img src="../../static/images/hot.png" alt="">
					<text>热门机构</text>
				</view>
				<view>
					<text>更多</text>
					<img src="../../static/images/seeMore.png" alt="">
				</view>
			</view>
			<view class="popularLust">
				<view class="popularItem" v-for="(item,index) in popularLust" :key="index">
					<img :src=item.img alt="">
					<view class="popName">{{item.address}}</view>
					<view class="fansNum">{{item.fs}}<text>粉丝</text></view>
					<button class="btn">关注</button>
				</view>
			</view>
		</view>
		<hans-tabber :list="list" style="position:fixed;bottom:0;width:100%;left:0;right:0;" @tabChange="tabChange"></hans-tabber>
	</view>
</template>

<script>
	import easyBar from '../../components/easy-scroll-bar/easy-scroll-bar.vue'
	import swiper from '../../components/Xss-swiper/Xsuu-swiper.vue'
	import hansTabber from '../../components/hans-tabbar/hans-tabbar.vue'
	export default {
		components: {
			easyBar,
			swiper,
			hansTabber
		},
		data() {
			return {
				currentIndex: 0,
				active: 0,
				isActi: 0,
				Notice: '关于做好中秋，国庆节日期间纠治“四风”问...',
				swiperStyleClass: [],
				list: [{
						"text": "首页",
						"iconPath": '../../static/images/index1.png',
						"selectedIconPath": '../../static/images/index.png'
					},
					{
						"text": "球馆",
						"iconPath": '../../static/images/dq.png',
						"selectedIconPath": '../../static/images/dq1.png'
					},
					{
						"text": "",
						"iconPath": '../../static/images/bx.png',
						"selectedIconPath": '../../static/images/bx.png'
					},
					{
						"text": "视频",
						"iconPath": '../../static/images/video.png',
						"selectedIconPath": '../../static/images/video1.png'
					},
					{
						"text": "我的",
						"iconPath": '../../static/images/my.png',
						"selectedIconPath": '../../static/images/my1.png'
					}
				],
				popularLust: [{
						img: '../../static/images/popular.png',
						address: '开封市图书馆',
						fs: '1342'
					},
					{
						img: '../../static/images/pop.png',
						address: '开封市大众影剧院',
						fs: '905'
					},
					{
						img: '../../static/images/bw.png',
						address: '开封市博物馆',
						fs: '3722'
					}
				],
				broadcastList: [{
					img: '../../static/images/zbBanner.png',
					tit: '开封市“河南省豫剧名家面对面”首场讲座',
					time: '2021-05-19'
				}],
				broadcastNav: [{
						tit: '直播中'
					},
					{
						tit: '直播预告'
					},
					{
						tit: '直播回放'
					}
				],
				actiList: [{
						img: '../../static/images/hdPic.png',
						tit: '河南省“舞台艺术结硕果， 献礼建党一百年”第十..',
						time: '2021-04-01',
						addres: '驻马店'
					},
					{
						img: '../../static/images/hdPic.png',
						tit: '河南省“舞台艺术结硕果， 献礼建党一百年”第十..',
						time: '2021-04-01',
						addres: '驻马店'
					}
				],
				activityList: [{
						tit: '全部活动'
					},
					{
						tit: '最新活动'
					},
					{
						tit: '可预约活动'
					},
					{
						tit: '历史活动'
					}
				],
				likeList: [{
						img: '../../static/images/like1.png',
						tit: '开封城摞城',
						addres: '开封市文旅局',
						like: '105'
					},
					{
						img: '../../static/images/like1.png',
						tit: '开封城摞城',
						addres: '开封市文旅局',
						like: '105'
					},
					{
						img: '../../static/images/like1.png',
						tit: '开封城摞城',
						addres: '开封市文旅局',
						like: '105'
					},
					{
						img: '../../static/images/like1.png',
						tit: '开封城摞城',
						addres: '开封市文旅局',
						like: '105'
					}
				],
				navList: [{
						img: '../../static/images/hd.png',
						tit: '活动预定',
						url:'/pages/eventReservation/eventReservation'
					},
					{
						img: '../../static/images/zb.png',
						tit: '直播互动',
						url:'/pages/live/live'
					},
					{
						img: '../../static/images/cb.png',
						tit: '寻找村宝',
						url:'/pages/find/find'
					},
					{
						img: '../../static/images/zt.png',
						tit: '主体风采',
						url: '/pages/service/service'
					},
					{
						img: '../../static/images/yjc.png',
						tit: '云剧场'
					},
					{
						img: '../../static/images/ykt.png',
						tit: '云课堂'
					},
					{
						img: '../../static/images/yzt.png',
						tit: '云逛展'
					},
					{
						img: '../../static/images/yfy.png',
						tit: '云非遗'
					}
				],
				swiperItems: [{
						"img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn11%2F440%2Fw744h496%2F20181030%2F97c2-hnaivxq7344712.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619914829&t=52a970d21d4898c8e7ca21b8b5aa9312",
						"title": "鲤程新能源",
						"Subtitle": "心鲤程，心鲤想！",
						"tip": "限时",
						"url": "111"
					},
					{
						"img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs1.xchuxing.com%2Fxchuxing%2Fforum%2F201607%2F27%2F185524zj7wog6qizk9o90k.jpg&refer=http%3A%2F%2Fs1.xchuxing.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619914861&t=4c64a4a5cec709f9d03507b793546646",
						"title": "包月低至9.9元",
						"Subtitle": "立享受充电礼包！",
						"tip": "推荐",
						"url": "111"
					},
					{
						"img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11780621658%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619914935&t=7d98cfe6b5a2634598fc7bda871aa7c9",
						"title": "进口儿童座椅",
						"Subtitle": "￥698.99",
						"tip": "进口",
						"url": "111"
					},
					{
						"img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstc.zjol.com.cn%2Fg1%2FM000E11CggSDVi-zTuAT1Y3AAB2NSzPgKI097.jpg%3Fwidth%3D576%26height%3D340&refer=http%3A%2F%2Fstc.zjol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619914972&t=9cc0a578d4818d87c43f1fe839010096",
						"title": "品牌T恤",
						"Subtitle": "￥22.99",
						"tip": "nike",
						"url": "111"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			// 导航的点击事件
			handelNavClick(url){
				uni.navigateTo({
					url:url
				})
			},
			tabChange(index) {
				if(index==0){
					uni.redirectTo({
						url:'/pages/index/index'
					})
				}else if(index==1){
					uni.redirectTo({
					  url:'/pages/venue/venue'
					})
				}else if(index==2){
					uni.redirectTo({
						url:'/pages/peopleOrder/peopleOrder'
					})
				}else if(index==3){
					uni.redirectTo({
						url:'/pages/videoPage/videoPage'
					})
				}else if(index==4){
					uni.redirectTo({
						url:'/pages/mine/mine'
					})
				}
			},
			scrollTabClick(e) {
				this.currentIndex = e
			},
			//活动导航的点击事件 
			handelClick(e) {
				this.active = e
			},
			// 直播导航的点击时间
			broadcastHnadel(e) {
				this.isActi = e
			}
		}
	}
</script>

<style lang="scss" scoped src="./index.scss">
	// @import url('./index.scss')
</style>
